<template>
	<view class="container bg-white w-100 h-100">
		<view style="padding-bottom: 220rpx;">		
			<view class="font-size-lg text-color-base font-weight-bold" style="margin-bottom: 20rpx;">充值金额</view>
			<view class="d-flex flex-wrap justify-content-between amounts">
				<view class="d-flex flex-column align-items-center just-content-center amount" 
					 :class="{'bg-primary text-color-white': item.selected, 'bg-base text-color-base': !item.selected}"
					  v-for="(item, index) in initialize.beansRecharge" :key="index" @tap="handleSelected(index)">
					<view class="d-flex align-items-center">
						  <view class="font-size-extra-lg font-weight-bold">{{ parseInt(item.value) }}</view>
						  <view class="font-size-sm font-weight-light">人人豆</view>
					</view>
					<view class="font-size-sm font-weight-light">¥{{item.price}}</view>
					<view class="discount" v-if="item.discount>0">{{item.discount}}折</view>
				</view>
			</view>
			
			<template>
				<view class="font-size-lg text-color-base font-weight-bold" style="margin-bottom: 20rpx;">使用说明</view>
				<view class="pre-line font-size-sm text-color-assist">
					{{ tips }}
				</view>
			</template>
			
			<!-- bottom box begin -->
			<view class="bottom-box position-fixed fixed-bottom w-100 d-flex flex-column bg-white">
				<button :type="selectedIndex!==''?'primary':'default'" class="b" @tap='recharge'>立即充值</button>
			</view>
			<!-- bottom box end -->
		</view>
	</view>
</template>

<script>
	import {mapState, mapMutations } from 'vuex'
	export default {
		computed:{
			...mapState(['initialize','userInfo']),
		},
		data() {
			return {
				agree: true,
				tips:"1. 人人豆充值成功后，不可退款。\n2. 人人豆仅限人人约拍小程序、人人约拍公众号以及人人约拍APP内使用。\n3. 如需开发票，请联系客服人员。",
				selectedIndex:''
			}
		},
		onLoad() {

		},
		methods: {
			...mapMutations(['setUserInfo']),
			handleSelected(index) {
				this.initialize.beansRecharge.forEach(item => this.$set(item, 'selected', false))
				this.$set(this.initialize.beansRecharge[index], 'selected', true)
				this.selectedIndex = index;
			},
			recharge() {
				if(this.selectedIndex==='') {
					this.$u.toast('请选择要充值的金额');return;
				}
				
				uni.showLoading({
					mask: true,
					title: '支付中...'
				});
				uni.hideLoading();
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
	padding: 0 40rpx;
}

.balance-info {
	padding: 50rpx 10rpx;
	
	view {
		padding: 10rpx 0;
	}
}

.amounts {
	
	margin-bottom: 40rpx;
	
	.amount {
		position: relative;
		width: calc(96% / 3);
		padding: 50rpx 0;
		margin-bottom: 20rpx;
		border-radius: 8rpx;
		
		.discount {
			position: absolute;
			top: 0;
			right: 0;
			background-color: #FD7C81;
			padding: 5rpx 15rpx;
			font-size: 22rpx;
			border-bottom-left-radius:15rpx;
			color: #ffffff;
		}
	}
}

.bottom-box {
	padding: 0 40rpx;
	box-shadow: 0 0 20rpx rgba(6, 6, 6, 0.1);
	
	.protocol {
		padding: 36rpx 0;
		height: 100rpx;
		view {
			margin-right: 10rpx;
		}
	}
	
	button {
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 50rem !important;
		margin: 30rpx 0;
	}
}
</style>
